/*

常规布局，顶部1导航+主体内容+底部导航, 有两种用法

1. class 形式。相比组件用法更灵活，样式更容易被覆盖，
<div class="struc">
  <div class="header"></div>
  <div class="main" v-scroll>
    <div class="main-scroll">
      <!-- 内容 -->
    </div>
  </div>
  <div class="footer"></div>
</div>

2. 组件形式，实际上生成的DOM与用法 1 相同。结构较紧凑，隐藏兼容细节，样式不易被覆盖
<struc header footer>
  <div slot="header"></div>
  <div slot="main">
    <!-- 内容 -->
  </div>
  <div slot="footer"></div>
</struc>

*/

/* 三段式布局 */
.struc {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  font-size: 16px;
  overflow-y: hidden;
  .header {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 46px;
    -webkit-overflow-scrolling: auto;
  }
  .main {
    display: block;
    position: absolute;
    top: 46px;
    bottom: 50px;
    left: 0;
    width: 100%;
    background-color: #fff;
    overflow-y: scroll;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-overflow-scrolling: touch;
    .main-scroll {
      width: 100%;
      min-height: 100%;
    }
  }
  .main-ios-top .main-scroll {
    border-top: 1px solid transparent;
  }
  .main-ios-bottom .main-scroll {
    border-bottom: 1px solid transparent;
  }
  .footer {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    -webkit-overflow-scrolling: auto;
  }
}

// 没有头部
.noHeader {
  > .header {
    display: none;
    height: 0;
  }
  > .main {
    top: 0;
  }
}

// 没有底部导航
.noFooter {
  > .main {
    bottom: 0;
  }
  > .footer {
    display: none;
    height: 0;
  }
}

/* 下面写公共样式 */
.page-all {
  position: relative;
  width: 100%;
  height: 100%;
}

.router-view-children {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 9;
}
